@mixin clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin wrap($is-wrap: true) {
  @if $is-wrap == true {
    word-wrap: break-word;
    word-break: break-all;
  } @else {
    white-space: nowrap;
  }
}
@mixin ellipsis($width: null, $line-clamp: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  width: $width;
  @if abs($line-clamp) > 1 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-line-clamp: $line-clamp;
    -webkit-box-orient: vertical;
    @include wrap;
  } @else {
    @include wrap(false);
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}
//https://blog.csdn.net/m0_46219714/article/details/132940786
$breakpoints: (
        "phone": (320px, 480px),
        "pad": (481px, 768px),
        "notebook": (769px, 1024px),
        "pc": (1025px, 1200px),
        "tv": 1201px,
);

@mixin respondTo($breakNames) {
  @if type-of($breakNames) == "list" {
    @each $breakName in $breakNames {
      $bp: map-get($breakpoints, $breakName);
      @if type-of($bp) == "list" {
        $min: nth($bp, 1);
        $max: nth($bp, 2);
        @media (min-width: $min) and (max-width: $max) {
          @content;
        }
      } @else {
        @media (min-width: $bp) {
          @content;
        }
      }
    }
  } @else {
    $bp: map-get($breakpoints, $breakNames);
    @if type-of($bp) == "list" {
      $min: nth($bp, 1);
      $max: nth($bp, 2);
      @media (min-width: $min) and (max-width: $max) {
        @content;
      }
    } @else {
      @media (min-width: $bp) {
        @content;
      }
    }
  }
}
